<script setup>
import { computed } from "vue";

const data = new Array(24).fill("").map((item, index) => {
  return {
    name: index,
    value: Math.ceil(Math.random() * 100),
  };
});

const option = computed(() => {
  return {
    tooltip: {
      trigger: "axis",
      axisPointer: { type: "shadow" },
    },
    grid: {
      left: "12",
      right: "12",
      top: "12",
      bottom: "12",
      containLabel: true,
    },
    xAxis: [
      {
        data: data.map((item) => item.name),
        axisTick: { show: false },
        splitLine: { show: false },
        axisLine: {
          lineStyle: {
            color: "#a5cde1",
            width: 0,
          },
        },
        axisLabel: { margin: 15 },
      },
    ],
    yAxis: {
      splitLine: {
        show: true,
        // lineStyle: { color: "#244850" },
      },
      axisTick: { show: false },
      axisLabel: { color: "#a5cde1", margin: 20 },
      axisLine: { show: false },
    },
    series: [
      {
        name: "次数",
        type: "bar",
        barWidth: "15px",
        itemStyle: {
          normal: {
            color: {
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                {
                  offset: 0,
                  color: "#00bc9b",
                },
                {
                  offset: 1,
                  color: "rgba(106, 230, 255, 0.06)",
                },
              ],
              global: false,
            },
          },
        },
        data: data,
      },
    ],
  };
});
</script>

<template>
  <div class="chart">
    <nf-charts :options="option" />
  </div>
</template>

<style scoped lang="scss">
.chart {
  width: 100%;
  height: 300px;
}
</style>
